
<template>
  <div class="PlanDetails">
    <!-- <header><img @click="goBack" src="http://hstatic.1818pay.cn/image/icon/left.png" /><span>方案详情</span></header> -->
    <div class="details" style="height:100%;background:#f2f2f2;">
      <div class="plandiv">
        <div style="display: flex;justify-content: space-between; width: 100%;background:#4F8BF4;">
          <div v-if="planDetail" style=" color: #fff;width:90%;margin:5px auto;">
            <div style="display: inline-block;">
              <!-- <img style="width: 20px; height:20px" class="BankLogo" :src='planDetail.bankCode|fmtBankimsrc' :onerror="commonConfig.errorImg" /> -->
              <div class="BankTitle">
                <p style="font-size: 14px;">{{planDetail.bankName}}【{{planDetail.cardNo|fmtCardNo}}】</p>
                <!-- <p style='font-size: 14px;'>{{planDetail.bankCode| fmtBankCode}}({{planDetail.cardNo | fmtCardNo }})</p> -->
              </div>
            </div>
            <div style="display: inline-block;text-align: right;" class="fr">
              <!-- <img style="    width: 20px;" class="BankLogo" :src='scdata.bankCode | fmtBankimsrc' /> -->
              <div class="BankTitle">
                <p>
                  <span
                    class="mag-r-10"
                    style="margin-top: 0.1rem;display: inline-block;vertical-align: middle;"
                  >
                    <van-icon name="location-o" />
                  </span>
                  <span style="vertical-align: middle;">{{city}}</span>
                </p>
                <!-- <p style='font-size: 14px;'>{{scdata.bankCode | fmtBankCode}}({{scdata.cardNo | fmtCardNo }})</p> -->
              </div>
            </div>
          </div>
        </div>
        <div style="clear: both;"></div>

        <div v-if="planDetail" class="center mag-t-30">
          <div class="fiex pad-b-10">
            <div class="fiex1">
              <p class="TotalTex1 f-22 c999">总还款金额(元)</p>
              <p class="TotalTex2 f-30">{{planDetail.totalRepaymentPrice | FixedNum2}}</p>
            </div>
            <div class="border-h"></div>
            <div class="fiex1">
              <p class="TotalTex1 f-22 c999">预留金额(元)</p>
              <p class="TotalTex2 f-30">{{planDetail.reservePrice | FixedNum2}}</p>
            </div>
            <div class="border-h"></div>
            <div class="fiex1">
              <p class="TotalTex1 f-22 c999">手续费(元)</p>
              <p class="TotalTex2 f-30">{{planDetail.totalFee| FixedNum2}}</p>
            </div>
          </div>
        </div>
        <div class="time-line">
          <div class="line-hui"></div>
        </div>
        <div class="pad-10 oh" style="padding-top: 0;">
          <span class="c999 f-26 mag-l-10 fl">计划编号：{{planDetail.id}}</span>
          <div v-if="planDetail.state==0" class="c-hui fr pr red dot-bth dot-red mag-r-10">失败</div>
          <div v-if="planDetail.state==1" class="c-hui fr pr blue dot-bth dot-blue mag-r-10">执行中</div>
          <div v-if="planDetail.state==2" class="c-hui fr pr green dot-bth dot-green mag-r-10">成功</div>
          <div v-if="planDetail.state==3" class="c-hui fr pr red dot-bth dot-red mag-r-10">中断</div>
        </div>
        <div v-if="planDetail" class="BankSurplus"></div>
      </div>
      <div
        class="oh pad-20 pad-l-40 pad-r-40 bg-fff pr"
        style="line-height: 1.5em;margin-top: 0.2rem;box-shadow: 0px 4px 3px 3px rgba(245, 241, 241, 0.8)"
      >
        <div class="fl f-28">单笔详情</div>
        <div class="fr f-24 c999">
          还款时间
          <span>{{new Date(planDetail.startDate).format('yyyy-MM-dd')}}</span> 至
          <span>{{new Date(planDetail.finishDate).format('yyyy-MM-dd')}}</span>
        </div>
      </div>
      <div style="margin: 0 auto;width:100%;background: #fff; overflow: scroll; height: 74vh;">
        <div class="line-hui"></div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="kk">
            <ul v-if="listItem" class="bill">
              <li :key="key" v-for="(item,key) in listItem" class="pad-t-20 pad-b-20">
                <div v-if="item.payType==2" style="display: flex;align-items: flex-start;">
                  <p style="display: inline-block;" class="mag-r-10">
                    <img
                      style="width: 0.6rem;"
                      src="http://hstatic.1818pay.cn/image/icon/dae/xiaofei@3x.png"
                      alt
                    />
                  </p>
                  <div class="fiex1" style="margin-left: 6px;  font-size: .25rem;">
                    <div class="tex1">
                      消费 {{item.price|moneyData}}元
                      <div style="clear: both;"></div>
                    </div>
                    <p class="c999 mag-t-5">(手续费{{item.fee|moneyData}}元)</p>
                    <!-- <p v-if="item.isAnew==1" class="b-d-yellow mag-t-10">已补单</p> -->
				        	  <p v-if="item.state==0&&item.isAnew!=1"  style="color:black; " class="fiex">
                      <span>失败原因:</span>
                       <van-notice-bar style=" margin-top: -3px;padding-right: 0;padding-left: 5px;" class="fiex1" background="#fff" :scrollable="true" :text="item.msg"></van-notice-bar>
                    </p>
                  </div>
                  <div class="fiex1 f-right">
                    <div v-if="item.state==0 && item.isAnew!=1" class="c-hui pr red dot-bth dot-red mag-r-10">失败</div>
                    <div v-if="item.state==0 && item.isAnew==1" class="c-hui pr green dot-bth dot-green mag-r-10">已补单</div>
                    <div v-if="item.state==1" class="c-hui pr blue dot-bth dot-blue mag-r-10">待执行</div>
                    <div v-if="item.state==2" class="c-hui pr blue dot-bth dot-blue mag-r-10">执行中</div>
                    <div v-if="item.state==3" class="c-hui pr green dot-bth dot-green mag-r-10">完成</div>
                    <div v-if="item.state==4" class="c-hui pr org dot-bth dot-org mag-r-10">已中断</div>
                    <div
                      class="f-24 c999"
                    >{{new Date(item.executeTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
                    <div v-if="item.isAnew==1" @click="openDetail(item)" class="f-26 c999 mag-t-7">
                      <span>补单详情</span>
                      <van-icon name="arrow" style="margin-top: 3px;vertical-align: top;" />
                    </div>
                  </div>
                </div>
                <div v-if="item.payType==1" style=" display: flex;align-items: center;">
                  <p class="mag-r-10">
                    <img
                      style=" width: 0.6rem;"
                      src="http://hstatic.1818pay.cn/image/icon/dae/ruzhang@3x.png"
                      alt
                    />
                  </p>
                  <div style="margin-left: 6px;    font-size: .25rem;">
                    <div class="tex1">
                      还款 {{item.price|moneyData}}元
                      <span class="red">(实际还款{{item.arrivalPrice|moneyData}}) 元</span>
                      <div style="clear: both;"></div>
                    </div>
                    <p class="tex2 mag-t-5">(手续费{{item.fee|moneyData}}元)</p>
                    <p v-if="item.state==0 && item.isAnew!=1 " style="color:black; " class="fiex">
					  <span>失败原因:</span>
                      <van-notice-bar style=" margin-top: -3px;padding-right: 0;padding-left: 5px;" class="fiex1" background="#fff" :scrollable="true" :text="item.msg"></van-notice-bar>
                    </p>
                  </div>
                  <div class="fiex1 f-right">
                    <div v-if="item.state==0 && item.isAnew!=1" class="c-hui pr red dot-bth dot-red mag-r-10">失败</div>
                    <div v-if="item.state==0 && item.isAnew==1" class="c-hui pr green dot-bth dot-green mag-r-10">已补单</div>
                    <div v-if="item.state==1" class="c-hui pr blue dot-bth dot-blue mag-r-10">待执行</div>
                    <div v-if="item.state==2" class="c-hui pr blue dot-bth dot-blue mag-r-10">执行中</div>
                    <div v-if="item.state==3" class="c-hui pr green dot-bth dot-green mag-r-10">完成</div>
                    <div v-if="item.state==4" class="c-hui pr org dot-bth dot-org mag-r-10">已中断</div>
                    <div class="f-24 c999"
                    >{{new Date(item.executeTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
                    <div v-if="item.isAnew==1" @click="openDetail(item)" class="f-26 c999 mag-t-7">
                      <span>补单详情</span>
                      <van-icon name="arrow" style="margin-top: 3px;vertical-align: top;" />
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-list>
      </div>
      <div style="clear: both;"></div>
    </div>

    <div style="clear: both;"></div>
    <!-- 计划详情弹出 -->
    <van-popup v-model="planDetailJson.show" style="border-radius: 5px;">
      <SupplementSheet
        v-if="planDetailJson.show"
        :planId="planDetailJson.orderNo"
        @closewin="closewinDetail"
      />
    </van-popup>
  </div>
</template>

<script>
var $th = "";
import AreaList from "./are";
import SupplementSheet from "@/views/SupplementSheet/index.vue";
export default {
  components: {
    SupplementSheet
  },
  data() {
    return {
      planDetailJson: {
        show: false,
        orderNo: "1"
      },
      items: [],
      finished: false,
      loading: false,
      listItem: [],
      show: false,
      scdata: {}, //储蓄卡
      city: "", //位置
      plan: {}, //
      repNum: "", //还款次数
      li: "执行此计划信用卡需预留",
      lia: ",请确保此卡金额充足，以免交易失败",
      basicAmount: null,
      createPlan: "", //用户创建计划的信息
      planDetail: "", //计划详情
      setPage: {
        pageSize: 10,
        pageNum: 1,
        total: 1,
        pages: 1
      },
      test: ""
    };
  },
  created: function() {},
  mounted() {
    $th = this;
    // 获取预览计划
    // $th.createPlan =JSON.parse(localStorage.getItem("createPlan"));
    //预览计划
    $th.init();
    console.log("$th.createPlan", $th.createPlan);
  },
  filters: {
    moneyData: function(val) {
      if (val) {
        var responese = $th.$accMul(val, 0.01).toFixed(2);
        return responese;
      } else {
        return 0;
      }
    },
    fmtDate: function(time) {
      time = new Date(time);
      var year = time.getFullYear(time);
      var month =
          time.getMonth(time) + 1 < 10
            ? "0" + (time.getMonth() + 1)
            : time.getMonth() + 1, //月份是从0开始的
        day = time.getDate(time) < 10 ? "0" + time.getDate() : time.getDate(),
        hour =
          time.getHours(time) < 10 ? "0" + time.getHours() : time.getHours(),
        min =
          time.getMinutes(time) < 10
            ? "0" + time.getMinutes()
            : time.getMinutes();

      time = year + "-" + month + "-" + day + " " + hour + ":" + min;
      return time;
    },
    fmtDate2: function(time) {
      // console.log(time)
      var list = time.split(",");
      console.log(list);
      var create = null;
      var end = null;
      for (var i = 0; i < list.length; i++) {
        // console.log(111)
        var listitem = new Date(parseInt(list[i]));
        var year = listitem.getFullYear(listitem);
        var month =
            listitem.getMonth(listitem) + 1 < 10
              ? "0" + (listitem.getMonth() + 1)
              : listitem.getMonth() + 1, //月份是从0开始的
          day =
            listitem.getDate(listitem) < 10
              ? "0" + listitem.getDate()
              : listitem.getDate(),
          hour =
            listitem.getHours(listitem) < 10
              ? "0" + listitem.getHours()
              : listitem.getHours(),
          min =
            listitem.getMinutes(listitem) < 10
              ? "0" + listitem.getMinutes()
              : listitem.getMinutes();
        // console.log(year + '/' + month + '/' + day  )
        if (i == 0) {
          create = year + "/" + month + "/" + day;
        }
        if (i == list.length - 1) {
          end = year + "/" + month + "/" + day;
        }
      }
      return create + "~" + end;
    }
  },
  methods: {
    openDetail(val) {
      console.log("返回的结果", val);
      this.planDetailJson.show = true;
      this.planDetailJson.orderNo = val.newOrderNo;
    },
    closewinDetail() {
      this.planDetailJson.show = false;
    },
    async onLoad() {
      var sendData = {
        planId: localStorage.getItem("planId")
      };
      sendData = $.extend(true, sendData, $th.setPage);
      var cardDetial = await $th.$axiosFun(
        "/plan/planDetail/getPlanDetailPage",
        sendData,
        "get"
      );
      if (cardDetial.code == 1000) {
        $th.setPage.total = cardDetial.data.total; //总条数
        $th.setPage.pages = cardDetial.data.pages; //总页数
        $th.listItem = $th.listItem.concat(cardDetial.data.list); //加载当前数据
        if (cardDetial.data.list.length != 0) {
          $th.city = cardDetial.data.list[0].ldCityNme;
        }
        //预览成功
        $th.loading = false;
        if (cardDetial.data.pages <= $th.setPage.pageNum) {
          this.finished = true;
        }
        $th.setPage.pageNum++;
      } else {
        $th.loading = false;
        $th.finished = true;
        $th.$toast(cardDetial.message);
      }
    },
    async init() {
      try {
        //获取头部
        var cardDetial = await $th.$axiosFun(
          "/plan/plan/getById",
          {
            planId: localStorage.getItem("planId")
          },
          "get"
        );
        this.test = localStorage.getItem("planId");
        if (cardDetial.code == 1000) {
          console.log("接口返回的结果2222", cardDetial);
          $th.planDetail = cardDetial.data;
          console.log("33333", $th.planDetail);
          $th.planDetail.totalRepaymentPrice = $th.$accMul(
            $th.planDetail.totalRepaymentPrice,
            0.01
          );
          $th.planDetail.reservePrice = $th.$accMul(
            $th.planDetail.reservePrice,
            0.01
          );
          $th.planDetail.totalFee = $th.$accMul($th.planDetail.totalFee, 0.01);
          //预览成功
        } else {
          // $th.$toast(cardDetial.message);
        }

        //获取列表
        // planDetail.planDetails
      } catch (error) {
        console.log("error", error);
      }
    },
    async getDateFun() {
      //  var cardDetial = await $th.$axiosFun('/plan/planDetail/getPlanDetailPage',{
      // 	 planId:$th.getUrl('planId')
      //  },'get');
      //   if(cardDetial.code==1000){
      // 	  $th.listItem = cardDetial.data.list;
      // 	  console.log("接口返回的结果4444", $th.planDetail.planDetails)
      //         //预览成功
      //  }else{
      //         // $th.$toast(cardDetial.message);
      // 	}
    },
    goBack() {
      this.$router.push({
        name: "zdjh",
        params: {
          cccard: this.cccard,
          city: this.$store.state.merchant_city,
          province: this.$route.params.province,
          amount: this.$route.params.amount
        }
      });
    },
    sub() {
      var city = this.$route.params.city;
      // var province = this.$route.params.province;
      this.$Spin.show();
      axios
        .get(this.$store.state.host + "/plans/createPlan", {
          params: {
            merchantId: this.$store.state.merchantId,
            institutionId: this.$store.state.institutionId,
            appId: this.$store.state.appId,
            cardId: this.$store.state.cccard.cardId,
            amount: this.$store.state.amout * 100,
            province: this.$store.state.province,
            city: this.$store.state.city,
            cardNumber: this.scdata.cardNo, //还款储蓄卡
            bankCode: this.scdata.bankCode,
            repayment: this.$store.state.repNum
          }
        })
        .then(res => {
          this.$Spin.hide();
          if (res.data.respCode == "0000") {
            this.$store.state.plancccard = res.data.data;
            this.items = res.data.data.list;
            this.plan = res.data.data.plan;
          } else {
            this.$Message.error(res.data.respDesc);
          }
        })
        .catch(err => {
          this.$Spin.hide();
          this.$Message.error("请求超时");
        });
    },
    async showalert() {
      //数据提交
      try {
        var sendData = "";
        //提取通道
        var aisleListStr = "";
        $.each($th.planDetail.aisleList, function(k, v) {
          aisleListStr += v + ",";
        });

        sendData = {
          programNameWeb:"kyq",
          customerId: $th.planDetail.plan.customerId, // 用户id
          aisles: aisleListStr, // 可用通道，逗号分隔
          flag: "0" // 默认为0
        };

        var reqData = await $th.$axiosFun(
          "/plan/plan/commitPlan",
          sendData,
          "post"
        );
        if (reqData.code == 1000) {
          $th.$toast("制定成功");
          setTimeout(function() {
            $th.$router.push("/");
          }, 500);
        } else if (reqData.code == 9001) {
          localStorage.setItem("commitPlan", JSON.stringify(reqData.data));
          $th.$dialog
            .alert({
              title: "提示",
              message: "请开通用户协议"
            })
            .then(() => {
              localStorage.setItem("cardId", $th.planDetail.plan.cardId);
              $th.$router.push("/ktxyzf?cardId=" + $th.planDetail.plan.cardId);
            });
        } else {
          $th.$toast(reqData.message);
        }
      } catch (error) {}

      // this.show = true;
    },
    snb() {
      // this.$Spin.show();
      axios
        .get(this.$store.state.host + "/plans/savePlan", {
          params: {
            channelCode: this.$store.state.channelCode,
            planJsonKey: this.$store.state.plancccard.planJsonKey,
            token: this.$store.state.token
            // mccs: this.mccArr.join(","),
            // orderNos: this.mccOrderNo.join(",")
          }
        })
        .then(res => {
          if (res.data.respCode == "0000") {
            // this.$Spin.hide();
            this.$router.push("suok");
          } else {
            this.$Message.error(res.data.respDesc);
          }
        });
    }
  }
};
</script>
<style scoped="scoped">
.b-d-yellow {
  border: 1px solid #ef793bff;
  color: #ef793bff;
  background: #fcf4ee;
  font-size: 0.22rem;
  display: inline-block;
  padding: 0.01rem 0.1rem;
  border-radius: 0.05rem;
}
.border-h {
  border-right: 2px solid #f7f7f7ff;
  height: 0.6rem;
}
.time-line {
  padding: 0.2rem 0;
  position: relative;
}
.time-line::after {
  content: "";
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  background: #f7f7f7;
  border-radius: 100%;
  position: absolute;
  left: -0.1rem;
  top: 0;
  bottom: 0;
  margin: auto;
}
.time-line::before {
  content: "";
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  background: #f7f7f7;
  border-radius: 100%;
  position: absolute;
  right: -0.1rem;
  top: 0;
  bottom: 0;
  margin: auto;
}
html {
  background-color: #f1f1f1;
}

body {
  background-color: #f1f1f1;
}

.PlanDetails header {
  font-size: 18px;
  background-color: #2a71c8;
  color: white;
  text-align: center;
  color: #ffffff;
  padding: 3% 0;
}

.PlanDetails header img {
  float: left;
  width: 5%;
  margin: 1% 0 0 2%;
}

.planwrap {
  background-color: #2a71c8;
  height: 110px;
}

.PlanDetails .details .plandiv {
  width: 90%;
  top: 0.4rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: left;
  font-size: 16px;
  z-index: 999;
  overflow: hidden;
  margin-top: 0.2rem;
  overflow: hidden;
}

.PlanDetails .BankLogo {
  background: #fff;
  border-radius: 50%;
  position: relative;
  top: 4px;
}

.PlanDetails .BankTitle {
  /* float: left;
		margin: 1.8% 2%;
		font-size: 16px; */
  margin-left: 6px;
  display: inline-block;
  font-size: 0.3rem;
}

.PlanDetails .BankState {
  float: right;
  margin-right: 2%;
  margin-top: 3px;
  line-height: 32px;
  width: 30%;
}

.PlanDetails .icolo {
  display: inline-block;
  width: 10px;
  height: 10px;

  margin-right: 5%;
  margin-top: 5%;
  border-radius: 50%;
}

.PlanDetails .BankSurplus {
  width: 100%;
  text-align: center;
}

.PlanDetails .BankSurplusP {
  font-size: 14px;
  /* margin-top: 10px; */
  font-family: PingFang-SC-Regular;
  color: rgba(177, 190, 214, 1);
}

.PlanDetails .BankSurplusP1 {
  font-size: 28px;
  /* padding: 5px 0 10px 0; */
  font-family: PingFang-SC-Bold;
  color: rgba(74, 122, 211, 1);
}

.PlanDetails .BankSurplusP2 {
  color: rgba(177, 190, 214, 1);
  font-size: 16px;
}

.PlanDetails .BankSurplus hr {
  height: 1px;
  background: rgba(230, 234, 243, 1);
  border: none;
}

.Total {
  float: left;
  width: 33.3%;
  font-size: 16px;
  border-right: 1px solid #e6eaf3;
  margin: 5% 0;
}

.TotalTex1 {
  font-size: 14px;
  color: #c1c1c1;
}

.TotalTex2 {
  font-size: 19px;
  color: #303030;
}

.procedures {
  float: right;
  width: 33.3%;
  margin-top: 5%;
  font-size: 16px;
}

.procedures img {
  position: relative;
  top: 4%;
}

.procedures1 {
  color: #6d89bd;
  font-size: 16px;
}

.procedures2 {
  color: #4a7ad3;
  font-size: 16px;
}

.bianhao {
  text-align: left;
  background: rgba(177, 193, 224, 1);
  border-radius: 0rem 0 1rem 1rem;
  font-size: 16px;
  font-family: PingFang-SC-Regular;
  color: rgba(255, 255, 255, 1);
}

.bianhao p {
  margin-left: 5%;
}

.kk {
  /* background: #fff; */
  border-radius: 10px;
  margin: 0 auto;
  width: 90%;
}

.kk .unbhr {
  text-align: center;
  display: inline-block;
  margin: auto;
  position: relative;
  bottom: -10%;
  background-color: #fcfcfc;
  font-family: PingFang-SC-Regular;
  color: rgba(168, 168, 168, 1);
}

.bill {
  padding-bottom: 5%;
  list-style-type: none;
  text-align: center;
  font-size: 14px;
  margin: auto;
}

.bill li {
  text-align: left;
  border-bottom: 1px solid #f2f2f2;
  /* padding: 0 10px; */
  line-height: 18px;
}

.bill .tex1 {
  /* padding-top: 3%; */
  color: black;
}

.bill .tex2 {
  font-family: PingFangSC-Regular;
  color: rgba(140, 140, 140, 1);
}

.bill .tex2 span {
  float: right;
  font-family: PingFangSC-Regular;
  color: rgba(140, 140, 140, 1);
}

.inp {
  background: #fff;
  height: 70px;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 10px;
}

.BankState {
  float: right;
  margin-right: 5%;
  font-size: 16px;
}
.res {
  width: 40%;
  border: none;
  padding: 10px 20px;
  font-size: 0.3rem;
  border-radius: 3px;
}

.foot-box .sel {
  color: #4f8bf4;
}
.foot-box {
  background: #fff;
  z-index: 2;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 15px 0;
  box-shadow: 0px -2px 3px 3px rgba(245, 241, 241, 0.8);
}
.foot-l {
  height: 20px;
  border-right: 1px solid #cccc;
}
</style>
